<template>
	<fu-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :border-radius="24">
		<view class="bg-white padding-top-lg padding-lr padding-bottom">
      <view class="relative margin-bottom">
      	<view class="text-333 text-bold fu-fs36 flex justify-center align-center">{{ i18n['优惠'] }}</view>
      	<view class="close-box fu-fs36" @tap="close"><text class="cuIcon-close"></text></view>
      </view>
			<scroll-view style="max-height: 700rpx;" scroll-y>
				<block v-for="(item, index) in coupon_list" :key="index">
          <view class="margin-bottom-sm">
            <!-- <fu-coupon :discountPrice="item.money" :name="item.name" :time="item.end_time" :limit="item.min_order_money" :item="item" :index="index" :isMyCoupon="true" @click="chooseCoupon(item)"></fu-coupon> -->
			<view class="height-200 flex">
			  <view class="left width-200 text-white solid-right text-center flex align-center justify-center flex-direction"
			    style="line-height: .9;" :class="[false ? 'disabled' : '']">
			    <view>
			      <text class="text-price fu-fs40"></text>
			      <text class="fu-fs56">{{ item.money | filterPrice }}</text>
			    </view>
			    <view class="fu-fs24 margin-top-sm">{{i18n['满']}}{{ item.min_order_money | filterPrice }}{{i18n['元使用']}}</view>
			  </view>
			  <view class="right bg-white flex-sub flex" style="min-width: 1px;">
			    <view class="flex-sub padding flex flex-direction justify-around" style="min-width: 1px;">
			      <view class="text-333 text-bold text-lg text-cut">{{ item.name }}</view>
			      <view class="text-999 text-sm text-cut-2" v-if='item && item.content'>{{item.content}}</view>
			      <view class="text-999 text-sm text-cut">{{i18n['有效期至']}} {{ item.end_time }}</view>
			    </view>
			    <view class="action text-white width-60 fu-fs28 flex align-center justify-center"
			      :class="[false ? 'disabled' : '']" @click="chooseCoupon(item)" v-if="true">
			      {{ false ? i18n['已过期'] : i18n['立即使用']}}</view>
			    <view class="action text-white width-60 fu-fs28 flex align-center justify-center"
			      :class="[false ? 'disabled' : '']" @click="chooseCoupon(item)" v-else>{{ false ? i18n['已领取'] : i18n['立即领取']}}
			    </view>
			  </view>
			</view>
          </view>
				</block>
			</scroll-view>
		</view>
	</fu-popup>
</template>

<script>
import fuCoupon from '@/pages/user/components/fu-coupon/fu-coupon.vue';
export default {
  components: {
    fuCoupon,
  },
	props: {
		coupon_list: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			show: false
		};
	},
	filters: {
	  filterPrice(price) {
	    return parseFloat(Number(price));
	  }
	},
	methods: {
		// 选择优惠券
		chooseCoupon(item) {
			this.$emit('chooseCoupon', item);
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
  .close-box {
    position: absolute;
    top: 0;
    right: 0;
  }
  .right {
    .action {
      border-top-right-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
      background: linear-gradient(359deg, #FE8B20 0%, #FE5114 100%);
      writing-mode: tb-rl;
      letter-spacing: 6rpx;
    }
  
    .action.disabled {
      background: #999999;
    }
  }
  
  .left {
    border-top-left-radius: 16rpx;
    border-bottom-left-radius: 16rpx;
    background: linear-gradient(359deg, #FE8B20 0%, #FE5114 100%);
  
    &.disabled {
      background: #999999;
    }
  }
</style>
